<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
	<title>ajax 测试登录</title>
	<style type="text/css">
	* {
		padding: 0;
		margin: 0;
	}
    </style>
</head>
<body>
	<div class="container">
		<h1>ajax 测试登录</h1>
		<div class="page-wrap">
		<div class="w">
			<form action="http://javascript.my/ajax3/login.php?id=form" method="post">
				<div class="user-con">
					<div class="user-title">用户登录</div>
	                <div class="user-box">
	                    <div class="error-item">
	                        <i class="fa fa-minus-circle error-icon"></i>
	                        <p class="err-msg">Error</p>
	                    </div>
	                    <div class="user-item">
	                        <label class="user-label" for="">
	                            <i class="fa fa-user"></i>
	                        </label>
	                        <input class="user-content" id="username" placeholder="请输入用户名" value="刘阿勇" name="username" autocomplete="off">
	                    </div>
	                    <div class="user-item">
	                        <label class="user-label" for="password">
	                            <i class="fa fa-lock"></i>
	                        </label>
	                        <input type="password" class="user-content" id="password" placeholder="请输入密码" name="password" value="123123" autocomplete="off">
	                    </div>
	                    <button class="btn btn-submit" id="submit" type="button">登录</button>
	                    <button class="btn btn-submit" id="check" type="button">检查登录状态</button>
	                    <div class="link-item">
	                        <a class="link" href="./user-pass-reset.html" target="_blank">忘记密码</a>
	                        <a class="link" href="./user-register.html" target="_blank">免费注册</a>
	                    </div>
	                </div>
				</div>
			</form>
		</div>
	</div>
	</div>
	<script src="https://cdn.staticfile.org/jquery/3.2.0/jquery.js"></script>
	<script type="text/javascript">
	$(function() {
		$('#check').click(function() {
			$.ajax({
				url:  'http://javascript.my/ajax3/get_user_info.php?id=check',
				method: 'post',
				success: function(response) {
					console.log(response)
					
				},
				error: function(error) {
					console.log(error)
					
				}
			})
		});

		$('#submit').click(function() {
			console.log($("form").serialize() )
			$form = $(this).closest('form');
			$.ajax({
				url:  $form.attr('action'),
				data: $form.serialize(),
				method: 'get',
				success: function(response) {
					console.log(response)
					
				},
				error: function(error) {
					console.log(error)
					
				}
			})
		})
	})
	</script>
</body>
</html>